<template>
  <div class="father-box">
    <div class="box">
      <el-form ref="loginFormName" :model="loginForm" :rules="guize">
        <img src="./logo_index.png" alt />
        <el-form-item prop="tell">
          <el-input v-model="loginForm.tell" placeholder="请输入手机号码">
            <i slot="prefix" class="iconfont icon-shouji"></i>
          </el-input>

        </el-form-item>
        <el-form-item prop="yanzheng">
          <el-input v-model="loginForm.yanzheng" placeholder="验证码">
            <i slot="prefix" class="iconfont icon-ecurityCode"></i>
          </el-input>

        </el-form-item>

        <el-form-item prop="xieyi">
          <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
          <span class="s1">我已阅读并同意用户协议和隐私条款</span>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="jinyong"
            :disabled="jinyong"
            type="primary"
            style="width:100%"
            @click="login()"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import '@/assets/js/gt.js'
import '@/assets/iconfont/iconfont.css'
export default {
  data () {
    var button = (rule, value, callback) => {
      // rule:校验规则，一般不用
      // value:当前被校验的信息
      // callback：回调函数，校验成功或失败都需要执行
      if (value) {
        callback()
      } else {
        return callback(new Error('请遵循协议'))
      }
    }
    return {
      // 按钮等待效果
      jinyong: false,
      // 优化DOM元素
      ctaObj: null,

      loginForm: {
        tell: '15613386601',
        yanzheng: '246810',
        xieyi: true
      },
      guize: {
        tell: [
          { required: true, message: '请输入手机号码' },
          { pattern: /^1[35789]\d{9}$/, message: '手机号码格式不对' }
        ],
        yanzheng: [
          { required: true, message: '请输入验证码' }
        ],
        xieyi: [
          { validator: button }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginFormName.validate(denglu => {
        if (denglu) {
          if (this.ctaObj !== null) {
            return this.ctaObj.verify()
          }
          this.jinyong = true
          // 人机校验
          var p = this.$http.get(`/captchas/${this.loginForm.tell}`)
          p
            .then(result => {
              // 给result.data进行对象的解构赋值
              var { data } = result.data
              // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
              window.initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: 'bind'
              }, captchaObj => {
                // 这里可以调用验证实例 captchaObj 的实例方法
                captchaObj.onReady(() => {
                  // 验证码ready之后才能调用verify方法显示验证码
                  // 显示窗口
                  // 显示验证码
                  captchaObj.verify()
                  this.ctaObj = captchaObj
                  // 按钮恢复正常
                  this.jinyong = false
                }).onSuccess(() => {
                  // your code
                  // 验证成功
                  // 调用真实性校验
                  this.loginact()
                }).onError(() => {
                  // your code
                  // 验证失败
                })
              })
            })
            .catch(err => {
              return console.log('极验密钥错误：' + err)
            })
        }
      })
    },
    // 真实性校验
    loginact () {
      // this.$router.push('/home')
      // this.$router.push({ name: 'houtai' })
      var p = this.$http.post('/authorizations', { mobile: this.loginForm.tell, code: this.loginForm.yanzheng })
      // var p = this.$http.post('/authorizations', { mobile, code } = {})
      p.then(result => {
        // console.log(result)
        if (result.data.message === 'OK') {
          window.sessionStorage.setItem('status', JSON.stringify(result.data.data))
          this.$router.push({ name: 'houtai' })
        }
      })
      // eslint-disable-next-line handle-callback-err
        .catch(err => {
          // return this.$message({ type: 'error', message: '登录系统错误' + err })
          return this.$message.error('请输出正确的账号密码')
        })
      // this.$router.push({ name: 'houtai' })
    }

  }
}
</script>

<style lang="less" scoped>
.father-box {
  height: 100%;
  background-image: url(./login_bg.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 577px;
    height: 360px;
    background-color: #fff;
    // text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 50%;
      margin: 0px 0 11px 115px;
    }
    .el-form {
      width: 85%;
    }
  }
}
a {
  text-decoration: none;
  color: rgb(64, 158, 255);
}
.s1 {
  margin-left: 10px;
}
</style>
